<template>
    <div>
        数据分析
        <div class="top_box">
            <div class="left_box"></div>
            <div class="right_box"></div>
        </div>
        <div class="bottom_box"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { getAnalysis } from '@/api/analysis'
export default {
    name: 'MyAppIndex',

    data() {
        return {
            analysisList: [],
        };
    },

    mounted() {
        this.getAnalysisList()
    },

    methods: {
        async getAnalysisList() {
            let res = await getAnalysis()
            console.log(res);
            let bing = echarts.init(document.querySelector('.left_box'))
            let shu = echarts.init(document.querySelector('.right_box'))
            let zhe = echarts.init(document.querySelector('.bottom_box'))
            // 饼图
            let ber = {
                title: {
                    text: '菜品销量排行榜',
                    left: 'left'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    top: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: res[0],
                        label: {
                            formatter: '{b} {d}%'
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 树状图
            let shuz = {
                title: {
                    text: '客户年龄分布',
                    left: 'left'
                },
                xAxis: {
                    type: 'category',
                    data: res[1].map(item => {
                        return item.age
                    }),
                    axisLabel: {
                        interval: 0//设置间距为0
                    }
                },

                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: res[1].map(item => {
                            return item['sales-volume']
                        }),
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
            // 折线图
            let zheT = {
                xAxis: {
                    type: 'category',
                    data: res[2].map(item => {
                        return item.month
                    })
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: res[2].map(item => {
                            return item['sales-volume']
                        }),
                        type: 'line'
                    }
                ]
            };
            bing.setOption(ber)
            shu.setOption(shuz)
            zhe.setOption(zheT)


        }
    },
};
</script>

<style lang="scss" scoped>
.top_box {
    width: 100vw;
    height: 500px;
  
    display: flex;

    .left_box {
        width: 50%;
        background: #ffff;
        height: 500px;
        // background: pink;
        margin-right: 20px;
    }

    .right_box {
        background: #ffff;
        width: 50%;
        height: 500px;
        // background: seagreen;
    }


}

.bottom_box {
    width: 100%;
    height: 500px;
    margin-top: 20px;
    background: #fff;
}
</style>